<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Jquery</title>
</head>
<body>
    <h1 id="main">Jquery</h1>
    <p class="lang" style="color: red;">中国</p>
    <p class="lang">美国</p>
</body>
<script>
    //$是什么?? 函数
    //$() 返回值? 对象
    // $("h1").css("color","red");
    (function(){
        //主方法返回对象
        var Jquery=function(selector){
            return new Jquery.prototype.Init(selector);
        }
        //可拓展方法
        Jquery.extends=function(obj){
            for(var attr in obj){
                this[attr]=obj[attr];
            }
            return this;
        }
        //给原型加载Init
        Jquery.prototype={
            Init:function(selector){
                console.log("选择器"+selector);
                //找到多个dom 例如class、标签查找
                var sz=document.querySelectorAll(selector);
                Array.prototype.push.apply(this,sz);//将得到的dom节点放入this中
                return this;//Init
            },
            css:function(attr,val){
                // console.log("属性"+attr);
                // console.log("值"+val);
                for(var i=0;i<this.length;i++){ //this.length==Init.length
                    if(val==undefined){
                    return this[i].style[attr];
                    }else{
                        this[i].style[attr]=val;
                    }
                }
                //实现链式
                return this;
            },
            //取出选择器找到的第n个元素
            eq:function(n){
                this[0]=this[n];
                this.length=1;
                return this;
            },
            //html
            html:function(val){
                for(var i=0;i<this.length;i++){
                    if(val==undefined){
                        return this[i].innerHTML;
                    }else{
                        this[i].innerHTML=val;
                    }
                }
                return this;
            },
            //实现jquery中的attr方法,要求可以做链式操作。
            attr:function(attr,val){
                // console.log(typeof attr);
                if(typeof attr =="object"){
                    for(let j in attr){
                        // console.log("j="+j+"attr="+attr[j]);
                        for(var i=0;i<this.length;i++){
                            this[i].setAttribute(j,attr[j]);
                        }
                    }
                }else{  //参数是string型
                for(var i=0;i<this.length;i++){
                    if(val==undefined){
                        return this[0].getAttribute(attr);
                    }else{
                        this[i].setAttribute(attr,val);
                    }
                }
                }
                return this;
                
            },
            each:function(fn){   //参数是个函数
                for(var i=0;i<this.length;i++){
                    fn(i,this[i]);//调用函数
                }
            }
        }
        //将Jquery的原型赋值给init;
        Jquery.prototype.Init.prototype=Jquery.prototype;
        //挂载到window对象上
        window.$=Jquery;
    })();
    $(".lang").css("color","pink").css("fontSize","50px")//xxx.style[color]="red"--->js
    $(".lang").eq(0).innerHTML="俄罗斯";
    console.log($(".lang").html());
    //给自己写的jq加功能
    $.extends({
       //去除两端空格
       trim:function(str){
            return str.replace(/^\s+|\s+$/g,'');//(正则,替换字符)
       }
    });
    var t='  hello   world  ';
    console.log(t+"---"+t.length);
    var ok=$.trim(t);
    console.log(ok+"---"+ok.length);//去除空格后长度
    console.log($(".lang").attr("class"));//得到class属性值
    $(".lang").attr("id","zg").attr("class","chinese");
    $("#zg").css("color","red");
    $(".chinese").css("fontSize","100px");
    $(".chinese").attr({width:"150",height:"100"});
    //each遍历
    $("p").each(function(index,item){
        console.log(index + "----" + item.innerHTML);
    });
    $("p").eq(1).html("eq更换文本")

    /*
    var stu={
       name:'张三',
       age:18
    }
    var arr1=['one','temo','niuniu'];
    Array.prototype.push.apply(stu,arr1);//(对象,数组)反着写无效
    console.log(stu);//数组+对象=对象
    
    for(var i=0;i<stu.length;i++){
        console.log(stu[i]);
    }
    for(var i in stu){
        console.log(stu[i]);//i为属性
    }
    */
</script>
</html>